<template>
  <div class="data-collect">
    <van-row class="title-container">
      <van-col span="6">地区</van-col>
      <van-col span="6">确诊</van-col>
      <van-col span="6">死亡</van-col>
      <van-col span="6">治愈</van-col>
    </van-row>
    <van-collapse :border="false" v-model="activeName" @change="changeCity">
      <van-collapse-item
        v-for="item in areaList.slice(0, end)"
        class="coll-items"
        :key="item.locationId"
        :name="item.locationId"
      >
        <div slot="title">
          <van-row class="content-container">
            <van-col span="6"
              ><span class="text">{{ item.provinceShortName }}</span></van-col
            >
            <van-col span="6"
              ><span class="text">{{ item.confirmedCount }}</span></van-col
            >
            <van-col span="6"
              ><span class="text">{{ item.deadCount }}</span></van-col
            >
            <van-col span="6"
              ><span class="text">{{ item.curedCount }}</span></van-col
            >
          </van-row>
        </div>
        <van-row
          :key="i"
          v-for="(its, i) in cities"
          class="content-container pd5 border-bottom"
        >
          <van-col span="6"
            ><span class="text">{{ its.cityName }}</span></van-col
          >
          <van-col span="6"
            ><span class="text">{{ its.confirmedCount }}</span></van-col
          >
          <van-col span="6"
            ><span class="text">{{ its.deadCount }}</span></van-col
          >
          <van-col span="6"
            ><span class="text">{{ its.curedCount }}</span></van-col
          >
        </van-row>
      </van-collapse-item>
      <div
        v-if="end !== areaList.length - 1"
        @click="end = areaList.length - 1"
        class="more"
      >
        查看更多地区<van-icon name="arrow-down" />
      </div>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: "fire-num",
  data() {
    return {
      activeName: [],
      cities: [],
      end: 5,
      INIT_STATE: 0
    };
  },
  computed: {
    areaList() {
      return this.$store.state.countData.area || [];
    }
  },
  // watch:{
  //   areaList(val) {
  //
  //     if (this.INIT_STATE > 0) return;
  //     this.cities = this.areaList.length ? this.areaList[0].cities :[];
  //     this.INIT_STATE = 1
  //   }
  // },
  mounted() {
    this.cities = this.areaList.length && this.areaList[0].cities;
  },
  methods: {
    changeCity(val) {
      // console.log(val);
      if (val.length) {
        let origin = val[val.length - 1];
        this.cities = this.areaList.find(
          item => item.locationId === origin
        ).cities;
      } else {
        this.cities = [];
      }
    }
  }
};
</script>

<style lang="less">
.coll-items {
  .van-cell {
    width: auto;
    padding: 5px 10px;
  }

  .van-cell--clickable {
    border-radius: 50px;
    background: #f5f5f5;
    margin: 8px 20px 0;
  }

  .van-collapse-item__content {
    padding: 5px 25px;
  }
}
.van-hairline--top::after {
  /*border: 1px solid #ffffff;*/
  border-top-width: 0px;
}
</style>
<style lang="less" scoped>
.data-collect {
  font-size: 14px;

  .title-container {
    text-align: center;
    padding: 0 47px 0px 27px;
  }

  .content-container {
    text-align: center;

    .text {
      color: #666666;
    }
  }

  .border-bottom {
    border-bottom: 1px solid #ebedf0;
  }
}
.more {
  margin-top: 10px;
  color: #999999;
  text-align: center;
  font-size: 14px;
}
</style>
